<template>
    <div class="categoryList">
        <!-- categoryFirst -->
        <div class="wapper">
            <ul class="categoryFirst">
                <li v-for="(item, index) in category.CFList"
                :key="item.id" 
                :class="{active:index==active}"
                @click="activeLi(index, item.id, item.categoryCode)"
                >{{ item.categoryName }}</li>
            </ul>
        </div>
        <!-- CategorySecond -->
        <div class="wapper2">
            <CategorySecond :adImage="adImage"></CategorySecond>
        </div>
    </div>
</template>

<script>
// 引入bscroll
import BScroll from 'better-scroll'
import CategorySecond from './CategorySecond'
import { mapState, mapActions } from 'vuex'
import { setTimeout } from 'timers';
export default {
    data() {
        return {
            active: 0,
            id: 1,
            adImage: ''
        }
    },
    methods: {
        activeLi(i, id) {
            this.active = i
            this.id = id
            this.getCSList({pid: this.id, platform: 1})
            // 把广告图片传过去
            this.adImage = this.category.CFList[i].adImage
        },
        ...mapActions(['getCFList', 'getCSList'])
    },
    computed: {
        ...mapState(['category'])
    },
    async created() {
        await this.getCFList({platform: 1})        
        this.activeLi(0, this.category.CFList[0].id)
        let scollFirst = new BScroll('.wapper', {
            probeType: 3,
            click: true
        })
        let scollSecond = new BScroll('.wapper2', {
            probeType: 3,
            click: true
        })
    },
    components: {
        CategorySecond
    }
}
</script>

<style lang="scss" scoped>
    .categoryFirst {
        li {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 0.8rem;
            height: 0.5rem;
            background: #F8F8F8;
            border-bottom: 1px solid #e6e6e6;
            font-size: 0.14rem;
        }
        .active {
            background: #fff;
            color: #1b8ffa;
        }
    }
</style>
